import { createApp } from 'vue/dist/vue.esm-bundler'

const App = {
  data() {
    return {
      list: [
        {
          id: 1,
          value: 'item-1'
        }, {
          id: 2,
          value: 'item-2'
        }, {
          id: 3,
          value: 'item-3'
        }
      ],
      isLogin: false
    }
  },
  template: `
    <div>
      <ul>
        <li v-for="(item, index) of list" :key="item.id">
          <span>{{ item.value }}</span>
          <input type="text"/>
          <button @click="deleteItem(index)">DELETE</button>
        </li>
      </ul>
      <div v-if="isLogin">
        <span>欢迎</span>
        <a href="#">小叶神算</a>
      </div>
      <div v-else>
        <a href="javascript:;" @click="isLogin = true">登录</a>
        <a href="#">注册</a>
      </div>
    </div>
  `,
  /**
   * 再删除 第二项 时， span 标签会闪烁变更
   * 
   * 先将 item3 的数据移到 item2 标签，再删除 item3 标签
   */
  methods: {
    deleteItem(index) {
      this.list.splice(index, 1)
    }
  }
}

const app = createApp(App).mount('#app')
